@extends('admin.layout.ucommon')

@section('css')
    <link rel="stylesheet" href="{{asset('static')}}/select2/select2.css">
    <link rel="stylesheet" href="{{asset('webuploader')}}/webuploader.css">
@endsection

@section('content')
    <div class="wrapper wrapper-content animated fadeIn">
        <div class="ibox-content" id="app">
            <div class="row row-lg">
                <div class="col-sm-12">
                    <form action="{{route('admin.article.update',$article)}}"  class="form-horizontal" role="frm"  id="form-node-add" method="post" >
                        @csrf
                        <div class="form-group">
                            <label for="title" class="col-sm-2 control-label"><span class="text-danger">*</span>文章标题:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="title" name="title"  v-model="info.title">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="description" class="col-sm-2 control-label">文章描述:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="description" name="description"  v-model="info.description">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="pic" class="col-sm-2 control-label">文章封面:</label>
                            <div class="col-sm-10">
                                <input type="hidden" name="pic" v-model="info.pic">
                                <div id="picker">上传文章封面</div>
                                <div>
                                    <img :src="info.pic" alt="" id="img">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="username" class="col-sm-2 control-label">文章内容:</label>
                            <div class="col-sm-10">
                                <textarea name="body" id="container"  ></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn  btn-success" @click="dopost">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('js')
    <script type="text/javascript" src="{{asset('static')}}/jquery-validate/dist/jquery.validate.min.js"></script>
    <script type="text/javascript" src="{{asset('static')}}/jquery-validate/dist/localization/messages_zh.js"></script>
    <script src="{{asset('static')}}/layer/layer.js"></script>
    <script type="text/javascript" src="{{asset('static')}}/vue/vue.js"></script>
    <!--webuploader-->
    <script type="text/javascript" src="{{asset('webuploader')}}/webuploader.js"></script>

    <!-- 配置文件 -->
    <script type="text/javascript" src="{{asset('static')}}/ueditor/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="{{asset('static')}}/ueditor/ueditor.all.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                info:{!! $article !!}
            },
            //组装挂载
            mounted(){
                this.editor = UE.getEditor('container',{
                    initialFrameHeight:600,
                });
                //
                this.editor.addListener("ready",()=>{
                   //设置富文本内容
                   this.editor.setContent(this.info.body)
                });

                //上传图片
                this.uploader = WebUploader.create({
                    auto:true,
                    // swf文件路径
                    swf:  '/webuploader/Uploader.swf',

                    // 文件接收服务端。
                    server: '{{route('admin.article.upfile')}}',
                    formData:{
                        _token:'{{csrf_token()}}'
                    },
                    fileVal:'file',
                    // 选择文件的按钮。可选。
                    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                    pick: {
                        id:'#picker',
                        multiple:false
                    },

                    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                    resize: true
                });

                this.uploader.on('uploadSuccess',function(file,ret){
                    //图片路径
                    let src=ret.url;
                    this.info.pic = src;
                });
            },
            methods:{
                //异步变同步
                async dopost(){
                    this.info.content = this.editor.getContent();
                    //Json字符串转换
                    var frmData = JSON.stringify(this.info);
                    let ret = await fetch(this.$refs.frm.action,{
                        methond:'PUT',
                        headers:{
                            'X-CSRF-TOKEN':'{{csrf_token()}}',
                            'Content-Type':'application/json'
                        },
                        body:frmData
                    });
                    let json = await ret.json();
                    location.href = json.url;
                }

            }
        })

    </script>
@endsection



